<template>
  <div>
    <Header> </Header>
    <div class="test-center w1200">
      <!-- v-model="checkedTabs" -->
      <el-tabs tab-position="left" type="card">
        <el-tab-pane
          v-for="(item, index) in $store.getters.sentenceCategory"
          :key="index"
          :label="item.title"
        >
          <TableData
            :type="Number(index)"
            :bookId="checkedBookData.book_id"
            :reviewNum="getTypeReviewNumber(Number(index))"
          ></TableData>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import TableData from "./TableData";
import { getReviewNumber } from "@/api/sentence";
export default {
  data() {
    return {
      checkedBookData: null,
      unitList: [],
      reviewNumList: [],
    };
  },
  computed: {
    getTypeReviewNumber() {
      return function (type) {
        let data = this.reviewNumList.filter((item) => {
          return item.category == type;
        });
        if (data.length > 0) {
          return data[0].num;
        }
        return 0;
      };
    },
  },
  components: {
    Header,
    TableData,
  },
  methods: {
    getReviewNumber() {
      getReviewNumber(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          this.reviewNumList = res.data;
        }
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getReviewNumber();
  },
  mounted() {},
};
</script>